import React, {useEffect, useRef} from 'react';
import './index.css'; // 引入样式文件

// 从全局窗口对象获取 ESObjectsManager 实例
// @ts-ignore
import {ESObjectsManager} from 'earthsdk3';
import {ESUeViewer} from 'earthsdk3-ue';
import {ESCesiumViewer} from 'earthsdk3-cesium';

// 创建 ESObjectsManager 实例
const objm = new ESObjectsManager(ESUeViewer, ESCesiumViewer);
const ViewerComponent: React.FC = () => {
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!containerRef.current) return;

        // 创建 Cesium 视口
        const viewer = objm.createCesiumViewer(containerRef.current);

        // 加载全球影像切片
        objm.sceneTree.createSceneObjectTreeItemFromJson({
            id: "ae103185-08c7-4ed0-b6d4-15ad77bbbf66",
            type: "ESImageryLayer",
            url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
            maximumLevel: 18,
            name: "全球影像",
            allowPicking: true
        });

        console.log(viewer);

        // 组件卸载时清理
        return () => {
            // 如果需要在组件卸载时清理 viewer，可以在这里实现
        };
    }, []);


    return (
        <div className="box">
            <div className="container" ref={containerRef}></div>
        </div>
    );
};

export default ViewerComponent;